<template>
    <!-- <div>
        商品分类  完成 照片上传成功不能更改
    </div> -->
    <div>
        <div class="app-container">
            <el-card>
                <div>
                    <div class="head">乐居管理</div>
                    <div>
                        <div class="classify">乐居分类</div>
                        <el-row :gutter="20">                      
                            <el-col :span="6" v-for="item in ljclassify" :key="item.id" >
                                <el-card  :body-style="{ padding: '0px' }">
                                    <div style="padding: 14px;">
                                        <div class="title">{{item.name}}</div>
                                    </div>
                                    <div>
                                        <!-- <template slot-scope="scope"> -->
                                         <el-upload
                                            class="avatar-uploader"
                                            :action="uploadUrl"
                                            :show-file-list="false"
                                            :headers="uploadHeaders"
                                            :on-success="AvatarSuccess"
                                            @click.native="ClickPic(item.id)"
                                            >
                                            <img style="width:80%;height:200px" v-if="item.icon" :src="item.icon" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                        </el-upload>
                                        <!-- </template> -->
                                    </div>
                                </el-card>
                            </el-col> 
                        </el-row>
                    </div>
                    <div>
                        <div class="classify" >全部分类</div>
                        <div>      
                        <!--  default-expand-all\ :tree-props="{children:AllCategory.children, hasChildren: 'hasChildren'}" -->
                            <el-table
                                    :data="AllCategory"
                                    style="width: 100%;"
                                    row-key="id"
                                    border    
                                    v-loading="loading"      
                                   >
                                    <el-table-column fixed prop="name"  label="菜单名称"  width="180"> </el-table-column>
                                    <el-table-column prop="icon" align="center"  label="icon"  width="180"> 
                                        <template slot-scope="scope">
                                            <img style="width:50px;height:50px" :src="scope.row.icon" alt="">
                                        </template>
                                        <img src="" alt="">
                                    </el-table-column>
                                    <el-table-column prop="name"  align="center" label="分类名字"  width="180"> </el-table-column>
                                    <el-table-column prop="sort"  align="center" label="排序"  width="180"> </el-table-column>
                                    <el-table-column prop="showStatus" align="center" label="显示状态"  width="180"> 
                                        <template slot-scope="scope">
                                            <div>{{scope.row.showStatus==0?'不显示':'显示'}}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="navStatus" align="center"  label="导航栏展示"  width="180"> 
                                        <template slot-scope="scope">
                                            <div>{{scope.row.navStatus==0?'不展示':'展示'}}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="description" align="center"  label="描述"  width="180"> </el-table-column>
                                    <el-table-column prop="createTime" align="center" label="创建时间"  width="180"> </el-table-column>
                           </el-table>    
                        </div>                 
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>
<script>
import category from "@/api/product/category";
import mix from "@/mixin/index";

export default {
    mixins:[mix],
    data(){
        return{
            //查询所有一二级分类
        AllCategory:[],
        ljclassify:[],
        heads:[
            {
                pic:"https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201118165103745dengju.png",
                name:'创意',
                index:0,
            },
            {
                pic:"https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201118165103745dengju.png",
                name:'风格',
                index:1,
            },
             {
                pic:"https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201118165103745dengju.png",
                name:'饰品',
                index:2,
            },
             {
                pic:"https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201118165103745dengju.png",
                name:'灯具',
                index:3,
            },
        ],
        index:"",
        loading:false,
        }
    },
    methods:{
        init(){
            this.loading=true;
         
            //获取一级二级分类列表
            category.getAllCategory().then(res=>{     
                   console.log(res)
                if(res.success){          
                   this.AllCategory=res.data.items.map(item=>{
                       var obj=item.category
                       obj.children=item.children
                       return obj
                   })
                   res.data.items.forEach(item=>{
                       if(item.category.name==="乐居"){
                           this.ljclassify=item.children
                       }
                   })
                }else{
                    this.$message.error("获取分类列表失败")
                }
                this.loading=false;
            })
        },
        //获取图片成功后的回调
        AvatarSuccess(res, file){
            console.log(res,file);
            // console.log(this.ljclassify.icon)
            // this.ljclassify.icon=res.data.fileUrl
            this.ljclassify.forEach(el=>{
                 if(el.id===this.index){
                        el.icon=res.data.fileUrl
                  }
            })
            // this.heads.pic=res.data.fileUrl
        },
        ClickPic(row){
          console.log(row)
          this.index=row;
      },
       
    },
    created(){
        this.init();
    }
}
</script>
<style lang="scss" scoped>
@import "@/styles/myScss";
.head{
     width: 100%;
    font-size: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 30px;
}
.classify{
    width: 100%;
    font-size: 16px;
    padding: 10px 0;
    margin-top: 30px;
    margin-bottom: 20px;
    font-weight: 600;
    }
    .title{
        width: 100%;
        padding: 10px 0;
        border-bottom: 1px solid #e5e5e5;
        margin-bottom:10px;
    }
</style>